package com.example.layout_components.Button_Navigation

import androidx.compose.foundation.layout.height
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.example.layout_components.R

@Composable
fun ButtonNavigationDemo() {
    var selectItem by remember { mutableStateOf(0) }
    val items = listOf(
        "Favorites", "Music", "Places", "News"
    )
    val icons = listOf(
        R.drawable.favorite , R.drawable.music , R.drawable.places , R.drawable.news
    )
    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text(text = "主页")
                },
                navigationIcon = {
                    IconButton(
                        onClick = { /*TODO*/ }
                    ) {
                        Icon(Icons.Filled.ArrowBack, null)
                    }
                }
            )
        },
        bottomBar = {
            BottomNavigation (
                    modifier = Modifier.height(100.dp)
                    ){
                items.forEachIndexed { index, item ->
                    BottomNavigationItem(
                        icon = { Icon(painter = painterResource(id = icons[index]) , contentDescription = null)},
                        label = { Text(text = item)},
                        selected = selectItem == index,
                        onClick = { selectItem = index }
                    ) 
                }
            }
        }
    ) {

    }
}